import React from "react";
import { Button, Col, Form, Input, Row, Table } from "antd";
import DesignSetterModal from "../../design/DesignSetterModal";
import { uniqueId } from "../../shared";
const GridSetter = ({}) => {
  return (
    <div>
      <Form.Item label="栅格">
        <DesignSetterModal trigger={<Button>设置</Button>}>
          <Form.List name="items">
            {(dataSource, { add }) => {
              return (
                <div>
                  <Table
                    columns={[
                      {
                        dataIndex: "key",
                        title: "删格",
                        render(value, record, index) {
                          return index + 1;
                          // return (
                          //   <Form.Item name={[record.name, "title"]}>
                          //     <Input />
                          //   </Form.Item>
                          // );
                        },
                      },
                      {
                        dataIndex: "flex",
                        title: "Flex",
                        render(value, record, index) {
                          return (
                            <>
                              <Form.Item noStyle name={[record.name, "flex"]}>
                                <Input />
                              </Form.Item>
                              <Form.Item hidden name={[record.name, "_id"]} />
                            </>
                          );
                        },
                      },
                    ]}
                    pagination={false}
                    dataSource={dataSource}
                  />
                  <Button
                    block
                    shape="round"
                    type="dashed"
                    onClick={() => {
                      const _id = uniqueId("low");
                      add({
                        isContainer: true,
                        schema: {
                          "x-component": "Container",
                          "x-component-props": {},
                        },
                        flex: 1,
                        _id,
                      });
                    }}
                  >
                    增加列
                  </Button>
                </div>
              );
            }}
          </Form.List>
        </DesignSetterModal>
      </Form.Item>
    </div>
  );
};
export default GridSetter;
